<template>
	<view class="root height-100percent">
		<movable-area id="photo" class="f1 relative width-100percent oh">
			<image
				class="absolute width-100percent height-100percent"
				:src="photo.src"
				:style="{ filter: `blur(30rpx)` }"
				mode="aspectFill"
			/>
			<movable-view
				class="height-100percent br-10 oh"
				:x="photo.x * scale"
				direction="all"
				:out-of-bounds="true"
				:scale="true"
				:inertia="true"
				@scale="scalePhoto"
				:style="{
					backgroundImage: `url(${photo.src})`,
					width: `${photo.width * scale}px`,
					height: `calc(100% * ${scale})`,
					boxShadow: `0 0 9rpx #eee`,
				}"
			>
				<movable-area class="width-100percent height-100percent oh">
					<movable-view
						direction="all"
						:scale="true"
						:out-of-bounds="true"
						:x="wig.x - wig.width * 0.2"
						:y="wig.y - wig.height * 0.3"
						:scale-value="1.8"
						:inertia="true"
						class="absolute"
						:style="{
							backgroundImage: `url(${wigGoods[tagIndex].specs[0].items[wigIndex].thumb})`,
							backgroundSize: `contain`,
							width: `${wig.width}px`,
							height: `${wig.height}px`,
							transform: wig.transform,
							border: wig.border,
						}"
						mode="aspectFit"
					/>
				</movable-area>
			</movable-view>
		</movable-area>

		<!-- <view class="ml-50 mr-50 mt-50 fd-row ai-center jc-sb">
			<image
				:style="{ width: `160rpx` }"
				class="height-50"
				src="/static/bg-fixedBase.png"
				mode="aspectFit"
			/>
			<image class="width-30 height-30" src="/static/icon-overlap.png" mode="aspectFit" />
		</view> -->

		<scroll-view class="tags" :scroll-x="true">
			<view class="tags-options">
				<label
					v-for="(tag, index) in tags"
					:key="index"
					:class="[{ active: tagIndex === index }, 'tags-option']"
					@click="switchTag(index)"
				>
					{{ tag }}
				</label>
			</view>
		</scroll-view>

		<scroll-view class="wigs" :scroll-x="true">
			<view class="wigs-options">
				<image
					v-for="(item, index) in wigGoods[tagIndex].specs[0].items"
					:key="index"
					:class="[{ active: wigIndex === index }, 'wigs-option']"
					:src="item.thumb"
					@click="switchWig(index)"
					mode="aspectFit"
				/>
				<text>{{ item.title }}</text>
			</view>
		</scroll-view>

		<view :style="{ padding: `6rpx 75rpx`, margin: `36rpx 30rpx 88rpx` }" class="fd-row jc-sa">
			<navigator
				hover-class="tap-hover"
				class="fs-28 color-fff bgc-ff8a00 br-30 lh-2"
				:style="{ padding: `0 18rpx` }"
				:url="`/pages/common/Webview?url=${encodeURIComponent(
					'https://jiafa.chengshikuxi.site/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.index'
				)}`"
			>
				查看订单
			</navigator>
			<button
				hover-class="tap-hover"
				class="fs-28 color-fff bgc-ff8a00 br-30 lh-2"
				:style="{ padding: `0 18rpx`, margin: 0 }"
				@click="toBuy"
			>
				立即购买
			</button>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { sleep, Storage, transformQueryString } from "@/libs/utils";

	@Component
	export default class TryOn extends Vue {
		// component property
		tags: string[] = [];
		tagIndex: number = 0;
		wigIndex: number = 0;
		wigGoods: AnyObject = [];

		photo: AnyObject = {
			src: "",
			backgroundPhotoWidth: 0,
			width: 0,
			top: 0,
			left: 0,
		};
		wig: AnyObject = {
			width: 0,
			height: 0,
			top: 0,
			left: 0,
			border: "none",
		};
		touchStartsPoint: AnyObject = {
			top: 0,
			left: 0,
			fingersDistance: 0,
		};
		scale: number = 1;
		is_get_info: number = 0;

		async onLoad() {
			uni.showToast({ title: "Loading...", icon: "loading" });
			const { data } = await this.$request.get("&r=util.uploader.getimgandgoods");

			this.photo.src = data.image;
			this.wigGoods = data.goods;
			this.is_get_info = +data.is_get_info;

			this.tags = data.goods.map((item: AnyObject) => item.title);

			const imageInfo = data.face_xy;

			await sleep(1);

			uni.createSelectorQuery()
				.in(this)
				.select("#photo")
				.boundingClientRect((res) => {
					const scale = imageInfo.ImageHeight / res.height;
					this.photo.backgroundPhotoWidth = res.width;
					this.photo.width = imageInfo.ImageWidth / scale;
					this.photo.height = res.height;
					this.photo.x = (res.width - this.photo.width) / 2;

					this.wig.width = imageInfo.FaceInfos[0].Width / scale;
					this.wig.height = imageInfo.FaceInfos[0].Height / scale;
					this.wig.y = imageInfo.FaceInfos[0].Y / scale;
					this.wig.x = imageInfo.FaceInfos[0].X / scale;
					uni.hideToast();
				})
				.exec();
		}
		scalePhoto({ detail }: AnyObject) {
			this.scale = detail.scale;
		}
		switchTag(index: number) {
			this.tagIndex = index;
		}
		switchWig(index: number) {
			this.wigIndex = index;
		}

		async toBuy() {
			if (!this.is_get_info) {
				const [getFail, getRes] = await (<AnyObject>uni).getUserProfile({
					desc: "后台记录用户订单信息",
				});
				if (getFail) return;
				await this.$request.post("&r=wxapp.hair_auth", getRes.userInfo);
			}

			const { wigGoods, tagIndex, wigIndex } = this,
				{ id, specs } = wigGoods[tagIndex];

			const url = `https://jiafa.chengshikuxi.site/app/index.php?${transformQueryString({
				i: 1,
				c: "entry",
				m: "ewei_shopv2",
				do: "mobile",
				r: "order.create",
				id,
				total: 1,
				optionid: specs[0].items[wigIndex].id,
				openid: Storage.get("authorization"),
			})}`;

			uni.navigateTo({ url: `/pages/common/Webview?url=${encodeURIComponent(url)}` });
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	// scss
	.tags {
		margin: 36rpx 22rpx 0;
		.tags-options {
			flex-direction: row;
			.tags-option {
				flex-shrink: 0;
				margin-right: 30rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				color: 333;
				&.active {
					background-color: #ffc159;
					padding: 4rpx 22rpx;
				}
			}

			&::before,
			&::after {
				content: "";
				flex-shrink: 0;
				width: 1rpx;
			}
		}
	}
	.wigs {
		margin: 22rpx;
		.wigs-options {
			flex-direction: row;
			.wigs-option {
				flex-shrink: 0;
				margin-right: 18rpx;
				width: 130rpx;
				height: 170rpx;
				border-radius: 12rpx;
				background-color: #eee;
				&.active {
					border: 1rpx solid #333;
				}
			}

			&::before,
			&::after {
				content: "";
				flex-shrink: 0;
				width: 1rpx;
			}
		}
	}
</style>